<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta charset="UTF-8">
    <title>出库申请登记预览页面</title>
    <link rel="stylesheet"  href="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
   	<link rel="stylesheet" href="/css/stock/c/Warehousing_Application_Registration.css" />
   <style type="text/css">
    	
    </style>
</head>
<body style="padding: 15px 50px;background-color: #eeeeee;">
	<div class="panel-heading hhead">
		<nav aria-label="breadcrumb">
		  <ol class="breadcrumb">
		  	<span style="color: blue;">您正在做的业务是：</span>
		    <li class="breadcrumb-item"><a href="#">库存管理</a></li>
		    <li class="breadcrumb-item"><a href="#">出库申请管理</a></li>
		    <li class="breadcrumb-item active" aria-current="page">出库申请登记</li>
		  </ol>
		</nav>

	</div>
    <div style="margin-bottom: 2px">
        <div style="display: inline;margin-left: 82%;">
            <button class="btn btn-primary" id="submit">确认</button>
            <button class="btn btn-primary" id="back">返回</button>
            <button class="btn btn-primary" id="clear">清除</button>
        </div>
    </div> <!-- 此div改用栅格来做 -->
    <div id="designListBox">
        <div style="text-align: center">
            <h3>出库申请单</h3>
        </div>
        <div style="padding: 30px">
           <table class="tbl1">
               <tr>
                   <td class="col1">出库人：</td>
                   <td class="col2"><input type="text" class="txt_under_line" id="outbound" readonly></td>
                   <td class="col1">出库理由：</td>
                   <td class="col2">
                        <select id="reason" disabled="disabled">
                            <option value="1">库存初始</option>
                            <option value="赠送">赠送</option>
                            <option value="内部借领">内部借领</option>
                            <option value="其他借领">其他借领</option>
                        </select>
                   </td>
               </tr>
           </table>

            <table class="table table-bordered" style="margin: 15px auto;">
                <thead>
                    <tr>
                        <th>序号</th><th>产品名称</th><th>产品编号</th>
                        <th>描述</th><th>数量</th><th>单位</th>
                        <th>成本单价（元）</th><th>小计（元）</th>
                    </tr>
                </thead>
                <tbody id="template">

                </tbody>

            </table>

            <table class="tbl3">
            	<tr>
                    <td class="col1">总件数：</td>
                    <td class="col2" id="totalNum"></td>
                    <td class="col1">总金额：</td> <td class="col2" id="totalPrice">222</td>
                </tr>
                <tr>
                    <td class="col1">登记人：</td>
                    <td class="col2"><input type="text" class="txt_under_line" id="Registrants" readonly></td>
                    <td class="col1">登记时间：</td> <td class="col2" id="time" readonly></td>
                </tr>
                <tr>
                    <td class="col1">备注：</td>
                    <td colspan="3" style="padding-top: 5px">
                        <textarea rows="4" cols="100" id="remark" readonly></textarea>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
		<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
		<script type="text/javascript" src="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript">
            $(function(){
                initOutboundTable()
                $("#back").on("click",function(){
                    window.location.href="/s-pay/WarehouseOutApplicationRegistration";
                })
                $("#clear").on("click",function (){
                    let row=$("#template tr").length
                    if(row>0){
                        $("#template").empty();
                    }
                    //清除页面的总金额和总件数
                    $("#totalNum").text("0");
                    $("#totalPrice").text("0");
                })
                $("#submit").on("click",function (){
                    if (sessionStorage.length > 0) {
                        let data = sessionStorage.getItem("data");
                        console.log(data)
                        // 发送请求到后端
                        $.ajax({
                            url: "/s-pay/registration",
                            type: "POST",
                            data: data,
                            contentType: "application/json",
                            dataType: "json",
                            success: function (flag) {
                                if (flag.errCode == "1") {
                                    alert(flag.errMsg)
                                } else {
                                    if(flag){
                                        
                                        alert("登记成功")
                                    }else{
                                        alert("系统错误")
                                    }
                                }
                            },
                            error: function (e) {
                            }
                        })
                        // 隐藏模态框时，清空sessionStorage
                        sessionStorage.clear();
                    }
                })
            })
            function initOutboundTable() {
                let data = sessionStorage.getItem("data");
                console.log(data);
                 data = JSON.parse(data);

                console.log(data);
                let firstObj=data[0];

                // 定义变量来存储对应的值
                let outbound = firstObj.outbound;
                let reason = firstObj.reason;
                let totalNum = firstObj.totalNum;
                let totalPrice = firstObj.totalPrice;
                let registerTime = firstObj.registerTime;
                let register = firstObj.register;
                let remark = firstObj.remark;
                let select=$("#reason");
                select.find("option[value='"+reason+"']").attr("selected",true);
                $("#outbound").val(outbound);
                $("#totalNum").text(totalNum);
                $("#totalPrice").text(totalPrice);
                $("#time").text(registerTime);
                $("#Registrants").val(register);
                $("#remark").val(remark);



                let $template = $("#template");
                $template.empty();
                for (let i = 1; i < data.length; i++) {
                   let products = data[i];
                    let tr ="<tr>"
                        +"<td>"+i+"</td>"
                        +"<td>"+products.productName+"</td>"
                        +"<td>"+products.productId+"</td>"
                    +"<td>"+products.productDescribe+"</td>"
                    +"<td>"+products.num+"</td>"
                    +"<td>"+products.amountUnit+"</td>"
                    +"<td>"+products.costPrice+"</td>"
                    +"<td>"+products.total+"</td>"+
                        "</tr>";
                    $("#template").append(tr);
                }
            }
        </script>
</body>
</html>
